<template>
	<a-row  class='main'>
		<a-spin   :indicator="indicator"  tip="正在加载中..."  :spinning='spinning'  :delay="delayTime">
			<div  class='introduce  mt12'>
				<div  class='color-main  aboutus  w-50'>
					<span  style="padding:0 20px"  class='inline-block  fontWeight '>产品简介</span>
				</div>	
				<p v-html='baseform.highlight'  class=' word-break-all'></p>
				<span  v-if='baseform.highlight==""'>暂未录入</span>  
			</div>
			<a-row  class='mt20' >
	  			<a-col   :span="16"  class='common-bg mr20'>
	  				<div class='ft20 fontWeight'>{{baseform.name}}</div>
	  				<a-row  class='text-center  mt28 pb30'  style='border-bottom:1px  dashed #999 '> 	 
		      			<a-col class="gutter-row" :span="6" >
		      				<span  class='color-666'>规模(万元) </span><br /><br />
		      				<span  class='color-minor  ft20'>{{baseform.size}}</span> 
		      			</a-col> 
		      			
		      			<a-col class="gutter-row" :span="6" >
		      				<span  class='color-666'>起投额(万元)</span><br /><br />
		      				<span  class='color-minor  ft20'>{{baseform.startingAmt}}</span> 
		      			</a-col> 
		      			<a-col class="gutter-row" :span="6" >
		      				<span  class='color-666'>产品类型</span><br /><br />
		      				<span  class='color-minor  ft18'>{{baseform.type | productType}}</span> 
		      			</a-col> 
		      			<a-col class="" :span="6" >
		      				<span  class='color-666'>融资主体性质</span><br /><br />
		      				<span  class='color-minor  ft20'>{{baseform.financingSubjectNature |financingSubjectNature}}</span> 
		      			</a-col> 
				    </a-row>
				    <a-row  class='text-center  mt42  pb30'  style='border-bottom:1px  dashed #999 '> 	 
		      			<a-col class="gutter-row" :span="6" >
		      				<span  class='color-666'>兑付方式</span><br /><br />
		      				<span  class='color-minor  ft16'>{{baseform.cash | way_of_duifu}}</span> 
		      			</a-col> 
		      			<a-col class="gutter-row" :span="6" >
		      				<span  class='color-666'>发行时间</span><br /><br />
		      				<span  class='color-minor  ft16'>{{baseform.releaseTime | formatDates}}</span> 
		      			</a-col> 
		      			<a-col class="gutter-row" :span="6" >
		      				<span  class='color-666'>发行方</span><br /><br />
		      				<span  class='color-minor  ft16  overSpill  inline-block  w-80'  :title="baseform.issuer">{{baseform.issuer}}</span> 
		      			</a-col> 
		      			<a-col class="" :span="6" >
		      				<span  class='color-666'>存续周期</span><br /><br />
		      				<span  class='color-minor  ft16'>{{baseform.subsistingCycle}}个月</span> 
		      			</a-col> 
				    </a-row>
				    <div  class='mt12 pl10 pr10 '>
				    	<span  class='color-minor   fontWeight'>发行进度</span> <br>
				    	<p  v-html='baseform.issueProgress'  class='mt6   word-break-all'></p>
				    	<span  v-if='baseform.issueProgress=="" || baseform.issueProgress==null'>暂无</span>
				    </div>
	  			</a-col>
	  			<a-col   :span="7"  class='common-bg'>
	  				 <div  class='color-main  aboutus'>
						<span  style="padding:0 20px"  class='inline-block  fontWeight'>业务流程</span>
					</div>	
					<div>
						<a-row>
							<a-col  :span='6'  class='color-main'>认购准备</a-col>
							<a-col  :span='4'><a-button shape="circle"  type="primary"  ghost  size='small' class='timeLineNum' style='background-color: #fff!important'>1</a-button></a-col>
							<a-col  :span='14'>在线预约、确定意向预约方式：QQ客服、</a-col>
						</a-row>
						<a-row  class='mt28'>
							<a-col  :span='6'  class='color-main'>认购产品</a-col>
							<a-col  :span='4'><a-button shape="circle"  type="primary"  ghost  size='small' class='timeLineNum'   style='background-color: #fff!important'>2</a-button></a-col>
							<a-col  :span='14'>打款至产品募集账户、确认到款、签署合同</a-col>
						</a-row>
						<a-row  class='mt28'>
							<a-col  :span='6'  class='color-main'>项目成立</a-col>
							<a-col  :span='4'><a-button shape="circle"  type="primary"  ghost  size='small' class='timeLineNum'   style='background-color: #fff!important'>3</a-button></a-col>
							<a-col  :span='14'>项目成立，成立日当天，结算提成</a-col>
						</a-row>
						<a-row  class='mt28'>
							<a-col  :span='6'  class='color-main'>跟踪服务</a-col>
							<a-col  :span='4'><a-button shape="circle"  type="primary"  ghost  size='small' class='timeLineNum'   style='background-color: #fff!important'>4</a-button></a-col>
							<a-col  :span='14'>确认书发放、定期披露项目情况，通知产品派息与兑付进度</a-col>
						</a-row>
						<div  class='timeLine'></div>
					</div>
	  			</a-col>
	  		</a-row>
	  		<a-row  class='mt20'>
	  			<a-col :span='16'  class='common-bg'>
	  				<dl  class='pb20 b-dashed-1'  v-if='baseform.tag!=""'>
	  					<dt  class='ft20 color-main fontWeight'>产品标签</dt>
	  					<div  class='mt20'>
		  					<a-button  shape="round" class='mr15 '  style='background-color: #fff;color:#FF9203;border-color:#FF9203;font-size: 14px;'  v-for='item in productTagData'  >{{item}}</a-button>
		  				</div>
	  				</dl>
	  				<!-- 基本信息 -->
	  				<dl  class='pb20 b-dashed-1 '>
	  					<dt  class='ft20 color-main fontWeight'>基本信息</dt>
	  					<a-row  class='mt12  lh32'>
	  						<a-col :span='12'>
	  							<a-row  >
		  							<a-col  :span='8'  class='color-999'>产品名称</a-col><a-col  :span='16'>{{baseform.name}}</a-col>
		  							<a-col  :span='8'  class='color-999 pt20'>产品规模</a-col><a-col  :span='16'>{{baseform.size}}万元</a-col>
		  							<a-col  :span='8'  class='color-999 pt20'>起投额</a-col><a-col  :span='16'>{{baseform.startingAmt}}万元</a-col>
		  							<a-col  :span='8'  class='color-999 pt20'>兑付方式</a-col><a-col  :span='16'>{{baseform.cash | way_of_duifu}}</a-col>
		  							
		  							<a-col  :span='8'  class='color-999 pt20'>发行时间</a-col><a-col  :span='16'>{{baseform.releaseTime | formatDates}}</a-col>
		  							<a-col  :span='8'  class='color-999 pt20'>收益描述</a-col><a-col  :span='16'>
		  								<span  v-html='baseform.benefitDescription'  class=" word-break-all"></span>
		  								<span  v-if='baseform.benefitDescription==""'>--</span>
		  							</a-col>
		  						</a-row>
	  						</a-col>
	  						<a-col :span='12'>
	  							<a-row  >
		  							<a-col  :span='8'  class='color-999'>产品类型</a-col><a-col  :span='16'>{{baseform.type | productType}}</a-col>
		  							<a-col  :span='8'  class='color-999'>融资主体性质</a-col><a-col  :span='16'>{{baseform.financingSubjectNature |financingSubjectNature}}</a-col>
		  							<a-col  :span='8'  class='color-999'>存续周期</a-col><a-col  :span='16'>{{baseform.subsistingCycle}}个月</a-col>
		  							<a-col  :span='8'  class='color-999'>发行方</a-col><a-col  :span='16'>{{baseform.issuer}}</a-col>
		  							<a-col  :span='8'  class='color-999'>增信方</a-col><a-col  :span='16'>{{baseform.increasingCredit ||  '--'}}</a-col>
		  							<a-col  :span='8'  class='color-999'>增信方式</a-col><a-col  :span='16'>
		  								<span >{{baseform.increasingCreditMode | increasingCreditMode}}</span>
		  								<span  v-if='baseform.increasingCreditMode==5'>{{baseform.increasingCreditModeValue}}</span>
		  							</a-col>
		  							<a-col  :span='8'  class='color-999 pt20'>承销方</a-col><a-col  :span='16'>{{baseform.underwriter}}</a-col>
		  						</a-row>
	  						</a-col>
	  					</a-row>
	  				</dl>
	  				<!-- 产品结构图 -->
	  				<dl  class='pb20 b-dashed-1 '  v-if='baseform.imageList && baseform.imageList.length>0'>
	  					<dt  class='ft20 color-main fontWeight'>产品结构图</dt>
	  					<div  class='mt20'  >
		  					 <img  :src='imgsrc'  style="max-width: 100%;">
		  				</div>
	  				</dl>
	  				<!-- 产品资料 -->
	  				<dl  class='pb20 b-dashed-1 '  v-if='baseform.fileVOList && baseform.fileVOList.length>0'>
	  					<dt  class='ft20 color-main fontWeight'>产品资料</dt>
	  					<div  class='mt20'>
		  					<a-button  class='mr15 '  icon="download" style='font-size: 14px;'  v-for='item in baseform.fileVOList'  @click='downloadFile(item.code)'>{{item.name}}</a-button>
		  				</div>
	  				</dl>
	  				<!-- 常见问题 -->
	  				<dl  class='pb20 b-dashed-1 '  v-for='item in baseform.faqList'>
	  					<dt  class='ft20 color-main fontWeight mb16'>{{item.question}}</dt>
	  					<dd>{{item.answer}}</dd>
	  				</dl>
	  				
	  			</a-col>
	  		</a-row>
	  	</a-spin>
	</a-row>
</template>

<script >
import { download_file }  from '@/api/common'
import { productDetail }  from  '@/api/home/index'
export default {
	name:'productIntroduce',
	data(){
		return {
			spinning:false,
	    	indicator:<a-icon type="loading-3-quarters"  spin  style="{ fontSize: '16px' , color :'#1e49a5' }"/> ,
	    	delayTime:500,

			baseform:{},
			productTagData:[],
			imgsrc:process.env.BASE_API+'/op/fileupload/download_file?token='+sessionStorage.getItem('tokenId')+'&fileCode=',//返回流程图
		}
	},
	created(){
		let code  = this.$route.query.code
		this.pageInit(code)
	},
	methods:{
		pageInit(code){
			this.spinning = true
			productDetail(code).then((res)=>{
					if(res.data.flag == true){
						this.baseform = res.data.data

						//产品标签
  						this.changeTag(this.baseform.tag)
  						//返回流程图
  						if(this.baseform.imageList && this.baseform.imageList.length>0){
  							this.imgsrc+=this.baseform.imageList[0].code
  						}
                    	
					}
					this.spinning = false
			})
			.catch((err)=>{
				this.spinning = false
			})
		},
		changeTag(str){
			this.productTagData = str.slice(0,-1).split(',') 
		},
		downloadFile(code){
			download_file(code)
		}
	},
	components:{
  		
  	}
}
</script>

<style scoped="scoped">
.main{padding:16px 0 50px;width: 1200px;margin:0 auto;}
.detailCard{padding:30px;background:#202020;}
.content li{height: 40px;color: #999;}

.introduce{background-color: #fff;min-height: 180px;padding:20px 30px;}

 .aboutus{margin:0 auto 20px;text-align: center;font-size: 18px;} 
 .aboutus::before{display:inline-block;content:'';width: 25%;border-top:2px solid #1E49A5;transform: translateY(-6px);-ms-transform:translateY(-7px);}
 .aboutus::after{display:inline-block;content:'';width: 25%;border-top:2px solid #1E49A5;transform: translateY(-6px);-ms-transform:translateY(-7px);}

/*两行文本溢出*/
/*.spillTwo{overflow: hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;}*/
/*卡片内容背景板*/
.common-bg{background-color: #fff;padding:20px 30px;}
/*产品信息栅栏条*/
/*.line{height: 140px;width: 2px;background-color: #ddd;right:0;top:-37%;}*/
.gutter-row{border-right: 1px dashed #999;}
/*产品流程 时间线
  流程数目变化，样式只需更改 height
*/
.timeLine{width: 2px;height: 309px;top:50px;left:114px;position: absolute;background-color: #1E49A5}
.timeLineNum{ position: relative;z-index: 9}
</style>